import React from 'react'
import { Link } from 'react-router-dom'

class Home extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            title: '标签',
            nameList: ['2021', '03-03', '03:03'],
            index: 0,
            colorIndex:1,
            classIndex:2
        }
        console.log('constructor')
    }

    // componentWillMount() {
    //     console.log('componentWillMount')
    // }

    componentDidMount() {
        // 接受数据
        console.log(this.props.location.state.userId)
    }

    render() {
        return (
            <div>
                <h3>{this.state.title}</h3>
                {
                    this.state.nameList.map((element, index) => {
                        // 不渲染index=this.state.index map替换forEach
                        // if (index !==this.state.index) {
                            // index =this.state.classIndex 修改color|| index==this.state.classIndex添加类型名active
                            console.log(index)
                            return (<p className={["tel", index===this.state.classIndex?"active":null].join(' ')}  style={{ color: index === this.state.colorIndex ? 'red' : 'yellow' }}  key={index}>{element}</p>)
                        // }
                    })
                }
                <Link to='./'>Logout</Link>
            </div>)

    }
}

export default Home